<template>
  <div class="chat-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-navbar"
      :title="messages.chatName"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <!-- /导航栏 -->
    <div
      class="message-list"
      ref="message-list"
    >
      <div
        v-for="(item, index) in messages.content"
        :key="index"
      >
        <van-divider v-if='index%5===0'>{{item.publictime}}</van-divider>
        <div
          class="message-item "
          :class="{ reverse: item.userid === userid }"
        >
          <van-image
            class="avatar"
            round
            fit="cover"
            v-if="item.userid===messages.chatUserid"
            :src="messages.baseUrl+messages.chatPhoto"
          />
          <van-image
            class="avatar"
            round
            fit="cover"
            v-else
            :src="selfInfo.baseUrl+selfInfo.photo"
          />
          <div
            class="msg-wrap"
            style="flex: 1;"
          >
            <div class="title">
              <a
                v-if="item.content.includes('http')"
                :href="item.content"
              >
                {{item.content}}
              </a>
              <span v-else>{{ item.content }}</span>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- /消息列表 -->

    <!-- 发送消息 -->
    <van-cell-group class="send-message">
      <van-field
        v-model="message"
        center
        clearable
      >
        <van-button
          slot="button"
          size="small"
          type="primary"
          @click="onSend"
        >发送</van-button>
      </van-field>
    </van-cell-group>
    <!-- /发送消息 -->
  </div>
</template>

<script>
import { getOneMessage, createMessage } from '@/api/user'
import globalBus from '@/utils/global-bus'

export default {
  name: 'ChatPage',
  data () {
    return {
      userid: '',
      message: '',
      messages: {
        baseUrl: '',
        chatPhoto: '',
        content: []
      },
      selfInfo: {}
    }
  },
  props: {
    chatUserid: {
      type: String,
      required: true
    }
  },

  created () {
    this.getOneMessage()
  },

  mounted () {
    this.scrollToBottom()
  },

  updated () {
    this.scrollToBottom()
  },

  methods: {
    async getOneMessage () {
      const userid = this.$store.state.user.userid
      this.userid = userid
      try {
        const res = await getOneMessage(userid, this.chatUserid)
        if (res.data.data.messages.content === undefined) {
          this.messages = { ...res.data.data.messages, content: [] }
        } else {
          this.messages = res.data.data.messages
        }
        this.selfInfo = res.data.data.selfInfo[0]
      } catch (error) {
        this.$store.commit('setUser', null)
        return this.$router.push('/login')
      }
    },

    async onSend () {
      const userid = this.userid
      await createMessage(userid, {
        content: this.message,
        userid: userid,
        chatUserid: this.chatUserid
      })
      this.messages.content.push({ userid, content: this.message })
      this.scrollToBottom()
      this.message = ''
      globalBus.$emit('message-update')
    },
    scrollToBottom () {
      const messageList = this.$refs['message-list']
      this.$nextTick(() => {
        messageList.scrollTop = messageList.scrollHeight
      })
    }
  }
}
</script>

<style scoped lang="less">
.chat-container {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 46px 0 50px 0;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background: #f5f5f6;
  .message-list {
    height: 100%;
    overflow-y: scroll;
    .message-item {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-start;
      padding: 10px;
      .msg-wrap {
        word-break: break-all;
        word-wrap: break-word;
      }
      .title {
        display: table;
        background: #e0effb;
        border-radius: 6px;
        font-size: 14px;
        padding: 10px 10px;
        margin-right: 45px;
        color: #222;
      }
      .avatar {
        width: 40px;
        height: 40px;
        margin-right: 5px;
      }
    }
    .reverse {
      flex-direction: row-reverse;
      .msg-wrap {
        display: flex;
        flex-direction: row-reverse;
        .title {
          margin-right: 5px;
          margin-left: 45px;
        }
      }
    }
  }

  .send-message {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f5f5f6 !important;
  }
}
.chat-container {
  .van-cell {
    background: #fff !important;
  }
}
</style>
